<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <title>角色管理</title>
  {% include 'rbac/common/main-header.html' %}
</head>
<body>
<div style="padding: 16px">
  <div class="layui-card">
    <div class="layui-card-body">
      <table
        class="layui-hide"
        id="role-table"
        lay-filter="role-table"
      ></table>
    </div>
  </div>
</div>
</body>
<script type="text/html" id="role-toolbar">
  <div class="layui-btn-container">
    <button type="button" class="layui-btn layui-btn-sm" lay-event="role-add">
      新增角色
    </button>
  </div>
</script>
<script type="text/html" id="role-tool">
  <div class="layui-btn-container">
    <button
      type="button"
      class="layui-btn layui-btn-xs layui-bg-blue"
      lay-event="role-edit"
    >
      <i class="layui-icon layui-icon-edit"></i>编辑
    </button>
    <button
      type="button"
      class="layui-btn layui-btn-xs"
      lay-event="role-power"
    >
      <i class="layui-icon layui-icon-diamond"></i>授权
    </button>
    <button
      type="button"
      class="layui-btn layui-btn-xs layui-bg-red"
      lay-event="role-remove"
    >
      <i class="layui-icon layui-icon-delete"></i>删除
    </button>
  </div>
</script>
{% include 'rbac/common/main-footer.html' %}
<script>
  let token = "{{ csrf_token }}";
  solve_csrf(token)

  layui.use(["table", "popup", "form"], function () {
    let table = layui.table;
    let popup = layui.popup;
    let $ = layui.$;
    let form = layui.form;

    // 角色列表
    table.render({
      elem: "#role-table",
      url: "/api/v1/role/table/",
      height: "full-35",
      toolbar: "#role-toolbar",
      // page: true,
      cols: [
        [
          {field: "id", title: "ID", sort: true, width: 80, fixed: "left",},
          {field: "name", title: "角色名", width: 300},
          {field: "code", title: "角色标识符", width: 120},
          {field: "create_datetime", title: "创建时间", width: 180},
          {field: "update_datetime", title: "更新时间", width: 180},
          {field: "desc", title: "描述", width: 120},
          {
            field: "is_enabled",
            title: "是否启用",
            width: 100,
            align: "center",
            templet: (d) => {
              return `<input type="checkbox"
                             name="is_enabled"
                             value="${d.id}"
                             title="启用|禁用"
                             lay-skin="switch" ${d.is_enabled ? "checked" : ""}
                             lay-filter="role-table-switch-status"/>`;
            },
          },
          {
            fixed: "right",
            title: "操作",
            align: "center",
            width: 200,
            toolbar: "#role-tool",
          },
        ],
      ],
    });

    // 头部工具栏事件 - 新增角色、..
    table.on("toolbar(role-table)", function (obj) {
      if (obj.event === "role-add") {
        window.role_add();
      }
    });

    // 行工具栏事件 - 编辑、删除、授权
    table.on("tool(role-table)", function (obj) {
      if (obj.event === "role-edit") {
        window.role_edit(obj);
      } else if (obj.event === "role-remove") {
        window.role_remove(obj);
      } else if (obj.event === "role-power") {
        window.role_power(obj);
      }
    });

    window.role_add = function () {
      let url = "/rbac/role/add.html/";
      layer_open("新增角色", url, '650px', '450px');
    };

    window.role_edit = function (obj) {
      // console.log(obj);
      let url = "/rbac/role/edit.html/?id=" + obj.data.id;
      layer_open("编辑角色", url, '650px', '450px');
    };

    window.role_power = function (obj) {
      layer.confirm('确定给 [' + obj.data.name + '] 角色授权?', {icon: 3, title: '提示'}, function (index) {
        layer.close(index)
        let url = "/rbac/role/power.html/?id=" + obj.data.id;
        layer_open("角色授权", url, '650px', '450px');
      })
    }

    window.role_remove = function (obj) {
      layer.confirm('确定要删除 [' + obj.data.name + '] 这个角色?', {icon: 3, title: '提示'}, function (index) {
        layer.close(index)
        let url = "/api/v1/role/del/"
        let data = {id: obj.data.id}
        deleteAjaxRequest(popup, obj, url, data)
      })
    }

    // 复选框事件处理 >> 权限的 启用/禁用
    form.on("switch(role-table-switch-status)", function (obj) {
      let operate = obj.elem.checked ? 1 : 0;
      let url = "/api/v1/role/is_enabled/"
      let data = {id: obj.value, is_enabled: operate}
      let reload_table = "role-table"
      switchAjaxRequest(popup, url, data, reload_table)
      return false;
    })
  });
</script>
</html>


